<template>
  <span style="display: flex;flex-wrap: wrap">
    <el-col :span="4" v-for="(item, index) in dataTemplate" :key="index" :style="item.blockCode === 'customerId' ||item.blockCode === 'projectEngineerId' ? 'display:none' : ''">
      <div class="w20" v-if="item.blockType === 'input' || item.blockType === 'select' || item.blockType === 'time' || item.blockType === 'upload'">
        <div class="labelName">{{ templateMapAll.nameColumn[item.blockCode] }}</div>
        <div v-if="item.blockCode === 'projectNo'">
          <el-autocomplete style="width: 100%" clearable v-model="data[item.blockCode]" :fetch-suggestions="getUserList" :placeholder="$t('placeholder.content')" @select="item => setSales(item, index)"></el-autocomplete>
          <el-input :maxlength="maxlength" style="display: none;" v-model="data['projectNoOld']"></el-input>
        </div>
        <div v-else-if="item.blockCode === 'customerName'">
          <popover-select selectType="customer" :placeholder="$t('scheduleManager.worksDetails.pleaseEnter')" @input="setCustomerName"
           valueObjName="customerShortName" v-model="data[item.blockCode]"></popover-select>
        </div>
        <div v-else-if="item.blockCode === 'systemType'"></div>
        <div v-else-if="item.blockCode === 'customerId'">
          <el-input :maxlength="maxlength" v-model="data[item.blockCode]"></el-input>
        </div>
        <div v-else-if="item.blockCode === 'projectEngineer'">
          <el-autocomplete style="width: 100%" clearable v-model="data[item.blockCode]" :fetch-suggestions="getProjectEngineer" :placeholder="$t('placeholder.content2')" @select="item => setProjectEngineer(item, index)"></el-autocomplete>
        </div>
        <div v-else-if="item.blockCode === 'projectBusinessName'">
          <el-autocomplete style="width: 100%" clearable v-model="data[item.blockCode]" :fetch-suggestions="getProjectEngineer" :placeholder="$t('placeholder.content2')" @select="item => setProjectBusinesser(item, index)"></el-autocomplete>
        </div>
        <div v-else-if="item.blockCode === 'purchaser'">
          <el-autocomplete style="width: 100%" clearable v-model="data[item.blockCode]" :fetch-suggestions="getProjectEngineer" :placeholder="$t('placeholder.content2')" @select="item => setPurchaser(item, index)"></el-autocomplete>
        </div>
        <div v-else-if="item.blockCode === 'completionCertificateFile'">
          <div class="yt-tb-cke">
          <el-checkbox true-label="1" label="0" false-label="0" v-model="data['completionCertificateFileIs']">N/A</el-checkbox>
          </div>
          <div style="display: inline-block;">
            <yt-template-upload v-if="data['completionCertificateFileIs'] !== '1'" v-model="data['completionCertificateFileId']" :createTime="data['completionCertificateFile']" :listData="item.blockCode"></yt-template-upload>
          </div>
        </div>
        <div v-else-if="item.blockCode === 'projectWorkUpload'">
          <div class="yt-tb-cke">
          <el-checkbox true-label="1" label="0" false-label="0" v-model="data['projectWorkUploadIs']">N/A</el-checkbox>
          </div>
          <div style="display: inline-block;">
            <yt-template-upload v-if="data['projectWorkUploadIs'] !== '1'" v-model="data['projectWorkUploadId']" :createTime="data['projectWorkUpload']" :listData="item.blockCode"></yt-template-upload>
          </div>
        </div>
        <div v-else-if="item.blockCode === 'satisfactionSurveyFile'">
          <div class="yt-tb-cke">
          <el-checkbox true-label="1" label="0" false-label="0" v-model="data['satisfactionSurveyFileIs']">N/A</el-checkbox>
          </div>
          <div style="display: inline-block;">
          <yt-template-upload v-if="data['satisfactionSurveyFileIs'] !== '1'" v-model="data['satisfactionSurveyFileId']" :createTime="data['satisfactionSurveyFile']" :listData="item.blockCode"></yt-template-upload>
          </div>
        </div>
        <div v-else-if="item.blockCode === 'projectEngineerId'">
          <el-input :maxlength="maxlength" v-model="data[item.blockCode]"></el-input>
        </div>
        <div v-else-if="item.blockCode === 'finishMoney'">
          <div v-check-submit tabindex="0">
            <el-input :maxlength="maxlength" type="number" v-model="data[item.blockCode]" @blur="clickLook(false)" style="display: none;" :placeholder="$t('placeholder.content')"></el-input>
            <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ data[item.blockCode] }}</div>
          </div>
        </div>
        <div v-else-if="item.blockCode === 'fileReadyDate'">
          <el-date-picker style="width: 100%" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" @change="fileReadyDateChange" :value-format="format" :format="format"/>
        </div>
        <div v-else-if="item.blockCode === 'requestFundsCheckDate'">
          <el-date-picker style="width: 100%" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" @change="requestFundsCheckDateChange" :value-format="format" :format="format"/>
        </div>
        <div v-else-if="item.blockCode === 'signBackDate'">
          <el-date-picker style="width: 100%" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" @change="signBackDateChange" :value-format="format" :format="format"/>
        </div>
        <div v-else-if="item.blockCode === 'requestFundsSendDate'">
          <el-date-picker style="width: 100%" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" @change="requestFundsSendDateChange" :value-format="format" :format="format"/>
        </div>
        <div v-else-if="item.blockCode === 'offerNo'">
          <el-input :maxlength="maxlength" id="offerNo" v-model="data[item.blockCode]"></el-input>
        </div>
        <div v-else-if="item.blockCode === 'subjectMatterNo'">
          <el-input :maxlength="maxlength" id="subjectMatterNo" disabled v-model="data[item.blockCode]"></el-input>
        </div>
        <div v-else-if="item.blockCode === 'isRequestFunds'">
          <yt-template-select v-model="data[item.blockCode]" :listData="isRequestFundsList" disabled></yt-template-select>
        </div>
        <div v-else-if="item.blockCode === 'payStatus'">
          <yt-template-select v-model="data[item.blockCode]" :listData="payStatusList" disabled></yt-template-select>
        </div>
        <div v-else-if="item.blockCode === 'projectStatus'">
          <div style="display: none;">{{projectStatusVla}}</div>
          <yt-template-select v-model="data[item.blockCode]" :listData="projectStatus" disabled></yt-template-select>
        </div>
        <div v-else-if="item.blockCode === 'signBackMoney' || item.blockCode === 'requestFundsCheckMoney' || item.blockCode === 'fileReadyMoney'
          ||  item.blockCode === 'poApprovalMoney' || item.blockCode === 'performanceBondMoney' ||item.blockCode === 'insureMoney'
          || item.blockCode === 'requestFundsSendMoney' || item.blockCode === 'offerMoney' ">
          <div v-check-submit tabindex="0">
            <el-input :maxlength="maxlength" type="number" v-model="data[item.blockCode]" style="display: none;" :placeholder="$t('placeholder.content')"></el-input>
            <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ data[item.blockCode] }}</div>
          </div>
        </div>
        <div v-else-if="item.blockCode === 'completedPercent'">
            <div v-check-submit tabindex="0">
              <el-input type="number" :max="100" :min="0" v-model="data[item.blockCode]" style="display: none;" placeholder="0~100" @blur="showAlert(data[item.blockCode], item.blockCode)"></el-input>
              <div class="box" v-format="'0%'" :placeholder="$t('placeholder.content')">{{ data[item.blockCode]/100 }}</div>
            </div>
          </div>
        <div v-else>
          <div v-if="item.blockType === 'input'">
            <el-input :maxlength="maxlength" v-if="item.blockCode === 'systemNo' ||item.blockCode === 'projectName' ||item.blockCode === 'country' ||item.blockCode === 'companyType'||item.blockCode === 'payStatus' ||item.blockCode === 'vendorDiscount' ||item.blockCode === 'fileNo'" v-model="data[item.blockCode]" disabled></el-input>
            <el-input :maxlength="1000" :clearable="true" type="textarea" show-word-limit="true" v-else-if="item.blockCode === 'progressComment'" v-model="data[item.blockCode]"></el-input>
            <!--<el-input :clearable="true"  v-else-if="item.blockCode === 'completedPercent'" v-model="data[item.blockCode]"></el-input>
            <span v-if="item.blockCode === 'completedPercent'" style=" position: absolute; top: 1%; right: 6%;color: #adadad; display: table-cell;white-space: nowrap; padding: 7px 10px;">%</span>-->
            <!--<yt-template-input :maxlength="1000" v-else-if="item.blockCode === 'progressComment'" v-model="data[item.blockCode]"></yt-template-input>-->
            <yt-template-input :maxlength="200" v-else v-model="data[item.blockCode]"></yt-template-input>
          </div>
          <div v-else-if="item.blockType === 'select'">
            <el-input :maxlength="maxlength" v-if="item.blockCode === 'bg' || item.blockCode === 'bu'" size="small" v-model="data[item.blockCode]" disabled></el-input>
            <yt-template-select v-else-if="item.blockCode === 'difference'" v-model="data[item.blockCode]" :listData="differenceList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'contractMonth'" v-model="data[item.blockCode]" :listData="contractMonthList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'projectYear' ||item.blockCode === 'offerYear' ||item.blockCode === 'executeYear' ||item.blockCode === 'customerYear' " v-model="data[item.blockCode]" :listData="projectYearList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'epcType'" v-model="data[item.blockCode]" :listData="epcTypeList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'contractQuarter'" v-model="data[item.blockCode]" :listData="contractQuarterList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'currencyType'" v-model="data[item.blockCode]" :listData="currencyTypeList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'performanceBondContent'" v-model="data[item.blockCode]" :listData="performanceBondContentList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'subjectMatterName'" v-model="data['subjectMatterNo']" :listData="subjectMatterNameList" @selectedChange= 'subjectMatterNameChange'></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'warrantyMoneyType'" v-model="data[item.blockCode]" :listData="warrantyMoneyTypeList"></yt-template-select>
            <yt-template-select v-else-if="item.blockCode === 'isCase'" v-model="data[item.blockCode]" :listData="NorY" disabled></yt-template-select>
            <yt-template-select v-else v-model="data[item.blockCode]" :listData="NorY"></yt-template-select>
          </div>

<!--          <div v-else-if="item.blockCode === 'projectWorkUpload'">-->
<!--          <div class="yt-tb-cke">-->
<!--          <el-checkbox true-label="1" label="0" false-label="0" v-model="data['projectWorkUploadIs']">N/A</el-checkbox>-->
<!--          </div>-->
<!--          <div style="display: inline-block;">-->
<!--            <yt-template-upload v-if="data['projectWorkUploadIs'] !== '1'" v-model="data['projectWorkUploadId']" :createTime="data['projectWorkUpload']" :listData="item.blockCode"></yt-template-upload>-->
<!--          </div>-->
<!--        </div>-->

          <div v-else-if="item.blockType === 'time'">
            <div v-if="item.blockCode === 'cancelOrderDate'">
              <!-- 撤单日 -->
              <el-date-picker style="width: 100%" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <!-- 保險日 -->
            <div v-else-if="item.blockCode === 'insureDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['insureDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['insureDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'anomalyCheckDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['anomalyCheckDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['anomalyCheckDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'anomalyReportDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['anomalyReportDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['anomalyReportDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'expectedMaintenanceStartDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['expectedMaintenanceStartDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['expectedMaintenanceStartDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'expectedMaintenanceEndDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['expectedMaintenanceEndDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['expectedMaintenanceEndDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'reinspectionDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['reinspectionDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['reinspectionDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'fileReadyDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['fileReadyDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['fileReadyDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'signBackDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['signBackDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['signBackDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'warrantyStartDate'" key="warrantyStartDate" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['warrantyStartDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['warrantyStartDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'warrantyEndDate'" key="warrantyEndDate" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['warrantyEndDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['warrantyEndDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'warrantyReceiveDate'" key="warrantyReceiveDate" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['warrantyReceiveDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['warrantyReceiveDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'noticeInvoiceDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['noticeInvoiceDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['noticeInvoiceDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"/>
            </div>
            <div v-else-if="item.blockCode === 'invoiceDate'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['invoiceDateIs']">N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['invoiceDateIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"
              />
            </div>
            <!--結案會議-->
            <div v-else-if="item.blockCode === 'endCaseMeeting'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['endCaseMeetingIs']" disabled>N/A</el-checkbox>
              </div>
              <el-date-picker disabled style="width: 100%" v-if="data['endCaseMeetingIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"
              />
            </div>
            <div v-else-if="item.blockCode === 'progressMeetingCurrent'" style="display: flex">
              <el-date-picker style="width: 100%" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format" disabled/>
            </div>
            <!--專案進度會議(次期)-->
            <div v-else-if="item.blockCode === 'progressMeetingAnother'" style="display: flex">
              <div class="yt-tb-cke">
                <el-checkbox true-label="1" label="0" false-label="0" v-model="data['progressMeetingAnotherIs']" disabled>N/A</el-checkbox>
              </div>
              <el-date-picker style="width: 100%" v-if="data['progressMeetingAnotherIs'] !== '1'" v-model="data[item.blockCode]" :placeholder="$t('placeholder.choose')" class="dateTime" type="date" :value-format="format" :format="format"
               disabled/>
            </div>
          <yt-template-time v-else="item.blockType === 'time'" :dataTilet ="item.blockCode" v-model="data[item.blockCode]"></yt-template-time></div>
          <yt-template-upload v-else-if="item.blockType === 'upload'" v-model="data[item.blockCode]"></yt-template-upload>
        </div>
      </div>
    </el-col>
  </span>
</template>

<script>
  import formatter from '@/utils/formatter';
  import YtTemplateInput from '@/components/Yt-template/templateInput.vue';
  import YtTemplateSelect from '@/components/Yt-template/templateSelect.vue';
  import YtGetTemplateSelect from '@/components/Yt-template/getTemplateSelect.vue';
  import YtGetTemplateSelectTwo from '@/components/Yt-template/getTemplateSelectTwo.vue';
  import YtTemplateTime from '@/components/Yt-template/templateTime.vue';
  import YtTemplateUpload from '@/components/Yt-template/templateUpload.vue';
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import popoverSelect from '@/components/popover-select/index.vue';
  import {
    getOfferOrderByprojectNo,
    queryProject,
    getBdOrder
  } from '@/api/scheduleManager/worksDetails';
  export default {
    name: 'YtTemplate',
    props: {
      maxlength: {
        type: Number,
        default: 100
      },
      systemType: { // 系统别
        type: String,
        default: ''
      },
      id: {
        type: String,
        default: ''
      },
      data: { // 1.基本讯息,2.合约内容,3.工程执行,工务详情接口返回的数据
        type: Object,
        default: {}
      },
      format: {
        // 时间格式
        type: String,
        default: 'yyyy-MM-dd'
      },
      dataTemplate: { // 这是根据系统别查询字段模板配置的接口返回的数据
        type: Array,
        default: () => []
      },
      tableName: {
        type: String,
        default: ''
      }
    },
    components: {
      formatter,
      YtTemplateInput,
      YtTemplateSelect,
      YtGetTemplateSelect,
      YtGetTemplateSelectTwo,
      YtTemplateTime,
      YtTemplateUpload,
      popoverSelect
    },
    data() {
      return {
        adaptList: this.$store.getters.allDic.adapt,
        isRequestFundsList: this.$store.getters.allDic.payment,
        payStatusList: this.$store.getters.allDic.projectName,
        projectStatus: this.$store.getters.allDic.projectStatus,
        fileReadyMoneyFla: true,
        clickLookFla: false,
        aa: 0,
        disabled: true,
        buList: [],
        bgList: [],
        templateList: [],
        templateAll: this.$store.getters.allDic,
        templateMapAll: this.$store.getters.allMapDic,
        differenceList: this.$store.getters.allDic.difference,
        contractMonthList: this.$store.getters.allDic.month,
        projectYearList: this.$store.getters.allDic.year,
        epcTypeList: [],
        contractQuarterList: this.$store.getters.allDic.quarter,
        currencyTypeList: this.$store.getters.allDic.currencyType,
        performanceBondContentList: this.$store.getters.allDic
          .performanceBondContent,
        subjectMatterNameList: this.$store.getters.allDic.subjectMatterName,
        warrantyMoneyTypeList: this.$store.getters.allDic.warrantyMoneyType,
        NorY: this.$store.getters.allDic.NorY
      };
    },
    watch: {
      'maxlength'() {
        console.log(val)
      },
      'data.cancelOrderDateIs'() {
        this.$set(this.data, 'cancelOrderDate', null);
      },
      'data.endCaseDateIs'() {
        this.$set(this.data, 'endCaseDate', null);
      },
      'data.poApprovalDateIs'() {
        this.$set(this.data, 'poApprovalDate', null);
      },
      'data.offerDateIs'() {
        this.$set(this.data, 'offerDate', null);
      },
      'data.anomalyCheckDateIs'() {
        this.$set(this.data, 'anomalyCheckDate', null);
      },
      'data.anomalyReportDateIs'() {
        this.$set(this.data, 'anomalyReportDate', null);
      },
      'data.beforeBpDateIs'() {
        this.$set(this.data, 'beforeBpDate', null);
      },
      'data.afterBpDateIs'() {
        this.$set(this.data, 'afterBpDate', null);
      },
      'data.expectedCommencementDateIs'() {
        this.$set(this.data, 'expectedCommencementDate', null);
      },
      'data.actualCommencementDateIs'() {
        this.$set(this.data, 'actualCommencementDate', null);
      },
      'data.expectedMaintenanceStartDateIs'() {
        this.$set(this.data, 'expectedMaintenanceStartDate', null);
      },
      'data.expectedMaintenanceEndDateIs'() {
        this.$set(this.data, 'expectedMaintenanceEndDate', null);
      },
      'data.expectedFinishDateIs'() {
        this.$set(this.data, 'expectedFinishDate', null);
      },
      'data.realityFinishDateIs'() {
        this.$set(this.data, 'realityFinishDate', null);
      },
      'data.finishReportDateIs'() {
        this.$set(this.data, 'finishReportDate', null);
      },
      'data.constructionPhotoDateIs'() {
        this.$set(this.data, 'constructionPhotoDate', null);
      },
      'data.acceptanceDateIs'() {
        this.$set(this.data, 'acceptanceDate', null);
      },
      'data.reinspectionDateIs'() {
        this.$set(this.data, 'reinspectionDate', null);
      },
      'data.inspectionDateIs'() {
        this.$set(this.data, 'inspectionDate', null);
      },
      'data.fileReadyDateIs'() {
        this.$set(this.data, 'fileReadyDate', null);
      },
      'data.requestFundsCheckDateIs'() {
        this.$set(this.data, 'requestFundsCheckDate', null);
      },
      'data.signBackDateIs'() {
        this.$set(this.data, 'signBackDate', null);
      },
      'data.requestFundsSendDateIs'() {
        this.$set(this.data, 'requestFundsSendDate', null);
      },
      'data.warrantyStartDateIs'() {
        this.$set(this.data, 'warrantyStartDate', null);
      },
      'data.warrantyEndDateIs'() {
        this.$set(this.data, 'warrantyEndDate', null);
      },
      'data.warrantyReceiveDateIs'() {
        this.$set(this.data, 'warrantyReceiveDate', null);
      },
      'data.noticeInvoiceDateIs'() {
        this.$set(this.data, 'noticeInvoiceDate', null);
      },
      'data.invoiceDateIs'() {
        this.$set(this.data, 'invoiceDate', null);
      },
      'data.capitalProjectionDateIs'() {
        this.$set(this.data, 'capitalProjectionDate', null);
      },
      'data.payStatus'() {
        this.$set(this.data, 'currencyType', 'NTD');
        this.$set(this.data, 'projectStatus', '0');
      },
      'data.performanceBondContent'() {
        if (this.data.performanceBondContent === '2') {
          this.data.performanceBondMoney = 0
        }
      },
      'data.warrantyMoneyType'() {
        if (this.data.warrantyMoneyType === '6') {
          this.data.warrantyStartDate = null
          this.data.warrantyStartDateIs = '1'

          this.data.warrantyEndDate = null
          this.data.warrantyEndDateIs = '1'

          this.data.warrantyReceiveDate = null
          this.data.warrantyReceiveDateIs = '1'
        } else {
          this.data.warrantyStartDateIs = '0'
          this.data.warrantyEndDateIs = '0'
          this.data.warrantyReceiveDateIs = '0'
        }
      },
      'data.isInsure'() {
        if (this.data.isInsure === 'N') {
          this.data.insureDate = null
          this.data.insureDateIs = '1'
          this.data.insureMoney = 0
        } else {
          this.data.insureDateIs = '0'
        }
      },
      'data.subjectMatterNo'() {
        if (this.data.subjectMatterNo && this.data.offerYear) {
          if (this.data.fileNo) {
            const filevalue = this.data.fileNo.split('-')
            this.$set(this.data, 'fileNo', this.data.subjectMatterNo + '-' + this.data.offerYear.substring(2, 4)
              + '-' + filevalue[2]);
          } else {
            const obj = {
              offerYear: this.data.offerYear,
              subjectMatterNo: this.data.subjectMatterNo
            }
            getBdOrder(obj).then(res => {
              this.$set(this.data, 'fileNo', this.data.subjectMatterNo + '-' + this.data.offerYear.substring(2, 4)
              + '-N' + res.data.fileOrderValue);
              this.$set(this.data, 'fileOrder', res.data.fileOrder);
            })
          }
        }
      },
      'data.offerYear'() {
        if (this.data.subjectMatterNo && this.data.offerYear) {
          if (this.data.fileNo) {
            const filevalue = this.data.fileNo.split('-')
            this.$set(this.data, 'fileNo', this.data.subjectMatterNo + '-' + this.data.offerYear.substring(2, 4)
              + '-' + filevalue[2]);
          } else {
            const obj = {
              offerYear: this.data.offerYear,
              subjectMatterNo: this.data.subjectMatterNo
            }
            getBdOrder(obj).then(res => {
              this.$set(this.data, 'fileNo', this.data.subjectMatterNo + '-' + this.data.offerYear.substring(2, 4)
              + '-N' + res.data.fileOrderValue);
              this.$set(this.data, 'fileOrder', res.data.fileOrder);
            })
          }
        }
      },
      'data.progressMeetingAnotherIs'() {
        this.$set(this.data, 'progressMeetingAnother', null);
      },
      'data.endCaseMeetingIs'() {
        this.$set(this.data, 'endCaseMeeting', null);
      }
    },
    computed: {
      projectStatusVla() {
        if (this.data.cancelOrderDate != null) {
          // 撤单日不为空 为 取消
          this.$set(this.data, 'projectStatus', '10')
          return '10'
        } else {
          // 为 待報價
          this.$set(this.data, 'projectStatus', '0')

          if (this.data.endCaseDate != null) {
            // 結案日不为空 为 結案
            this.$set(this.data, 'projectStatus', '9')
            return '9'
          } else {
            if (this.tableName === 'cancelOrderDate') {
              // 所有记录都有實際收款日 为 待結案
              this.$set(this.data, 'projectStatus', '8')
              return '8'
            } else {
              this.$set(this.data, 'projectStatus', '0')
              if (this.tableName === 'endCaseDate') {
                // 所有记录都有发票日期 为 待收款
                this.$set(this.data, 'projectStatus', '7')
                return '7'
              } else {
                this.$set(this.data, 'projectStatus', '0')
                if (this.data.requestFundsSendDate != null) {
                  // 请款送件日不为空 为 待開發票
                  this.$set(this.data, 'projectStatus', '6')
                  return '6'
                } else {
                  this.$set(this.data, 'projectStatus', '0')
                  if (this.data.fileReadyDate != null) {
                    // 文件备妥日不为空 为 待送件
                    this.$set(this.data, 'projectStatus', '5')
                    return '5'
                  } else {
                    this.$set(this.data, 'projectStatus', '0')
                    if (this.data.realityFinishDate != null) {
                      // 實際完工日不为空 为 待備妥/送驗
                      this.$set(this.data, 'projectStatus', '4')
                      return '4'
                    } else {
                      this.$set(this.data, 'projectStatus', '0')
                      if (this.data.actualCommencementDate != null) {
                        // 實際開工日不为空 为 待完工
                        this.$set(this.data, 'projectStatus', '3')
                        return '3'
                      } else {
                        this.$set(this.data, 'projectStatus', '0')
                        if (this.data.poApprovalDate != null) {
                          // PO核准日不为空 为 待施工
                          this.$set(this.data, 'projectStatus', '2')
                          return '2'
                        } else {
                          this.$set(this.data, 'projectStatus', '0')
                          if (this.data.offerDate != null) {
                            // 报价日不为空 为 待核准
                            this.$set(this.data, 'projectStatus', '1')
                            return '1'
                          } else {
                            this.$set(this.data, 'projectStatus', '0')
                            return '0'
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        
      }
    },
    mounted() {
      console.log('payStatusList', this.$store.getters.allDic.projectName)
      console.log('this.data', this.data)
      this.epcTypeList = this.$store.getters.allDic.epcType.filter(item => item.remark.indexOf(this.systemType) !== -1)
    },
    methods: {
      showAlert(percent, block) {
        console.log('ddddd')
        if (percent) {
          if (percent > 100 || percent < 0) {
            this.$message.warning('请輸入0~100')
            console.log(percent, block)
            console.log(this.data[block])
            this.data[block] = ''
          }
        }
      },
      subjectMatterNameChange(list) {
        this.$set(this.data, 'subjectMatterName', this.$store.getters.allMapDic.subjectMatterName[list])
      },
      fileReadyMoney(val) {
        if (val) {
          this.fileReadyMoneyFla = true;
        } else {
          this.fileReadyMoneyFla = false;
        }
      },
      clickLook(val) {
        if (val) {
          this.clickLookFla = true;
        } else {
          this.clickLookFla = false;
        }
      },
      // 送驗簽回金額
      signBackDateChange() {
        if (
          this.data.finishMoney
        ) {
          this.$set(this.data, 'signBackMoney', this.data.finishMoney)
        }
        if (this.data.signBackDate == null) {
          this.$set(this.data, 'signBackMoney', '')
        }
      },
      // 請款送件金額
      requestFundsSendDateChange() {
        if (
          this.data.finishMoney
        ) {
          this.$set(this.data, 'requestFundsSendMoney', this.data.finishMoney)
        }
        if (this.data.requestFundsSendDate == null) {
          this.$set(this.data, 'requestFundsSendMoney', '')
        }
      },
      // 請款送驗日
      requestFundsCheckDateChange() {
        if (
          this.data.finishMoney
        ) {
          this.$set(this.data, 'requestFundsCheckMoney', this.data.finishMoney)
        }
        if (this.data.requestFundsCheckDate == null) {
          this.$set(this.data, 'requestFundsCheckMoney', '')
        }
      },
      // 文件備妥金額
      fileReadyDateChange() {
        if (
          this.data.finishMoney
        ) {
          this.$set(this.data, 'fileReadyMoney', this.data.finishMoney)
        }
        if (this.data.fileReadyDate == null) {
          this.$set(this.data, 'fileReadyMoney', '')
        }
      },
      // 客户简称
      setCustomerName(val, item) {
        console.log(item)
        this.data.customerName = item.customerShortName;
        this.data.customerId = item.id;
      },
      // 专案工程师
      setProjectEngineer(item) {
        this.data.projectEngineer = item.ename;
        this.data.projectEngineerId = item.id;
      },
      // 专案业务员
      setProjectBusinesser(item) {
        this.data.projectBusinessName = item.ename;
        this.data.projectBusinessId = item.id;
      },
      // 采購責任人
      setPurchaser(item) {
        this.data.purchaser = item.ename;
        this.data.purchaseId = item.id;
      },
      // 专案工程师
      getProjectEngineer(queryString, cb) {
        getUserInfoByName({ username: queryString }).then(res => {
          const userList = res.data.rows;
          for (let i = 0; i < userList.length; i++) {
            userList[i].value = userList[i].ename;
          }
          cb(userList);
        });
      },
      // 專案名稱
      setSales(item) {
        this.data.projectId = item.id;
        this.data.projectNo = item.projectNo;
        this.data.projectNoOld = item.projectNo;
        this.data.projectName = item.projectName;
        this.data.country = this.templateMapAll.country[item.country];
        this.data.companyType = item.company;
        this.data.bg = item.bg;
        this.data.bu = item.bu;
        this.getIsbdValue(item.projectNo)
        //   this.dialogForm.salesId = item.id;
      },
      // 專案名稱
      getUserList(queryString, cb) {
        queryProject({ projectNo: queryString }).then(res => {
          const userList = res.data.rows;
          for (let i = 0; i < userList.length; i++) {
            userList[i].value = userList[i].projectNo;
          }
          cb(userList);
        });
      },
      search() {
        this.$emit('input', this.value);
        this.$emit('search', this.value);
      },
      getIsbdValue(val) { // 获得报价单号
        if (val) {
          getOfferOrderByprojectNo({ projectNo: val }).then(res => {
            if (res.data) {
              this.$set(this.data, 'offerNo', res.data)
            }
            console.log(res.data)
          });
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .inputText {
    padding-left: 14px;
    height: 32px;
    font-size: 13px;
    line-height: 32px;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #606266;
  }
  .yt-tb-cke{
    display: inline-block;
    height: 37px;
    line-height: 37px;
    margin-right: 5px;
  }
  .box{
    border: 1px solid #d9d9d9;
    padding: 0 15px !important;
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    cursor:text;
    font-size: 12px;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 12px;
  }
</style>
